<template>
    <div ref="layoutRef" :style="{height: layoutHeight  + 'px'}" class="tableDiv"
         style="background-color: red;height: 100%;position: absolute;width: 100%">
        <div ref="serchRef">
            <slot name="search"></slot>
        </div>
        <slot name="table" :height="tableHeight"></slot>
        <div :style="{height: pageHeight  + 'px'}">
            <slot class="aaa" name="pagination"></slot>
        </div>
    </div>
</template>
<style scoped>
</style>

<script lang="ts" setup>
    import {defineProps, onMounted, ref} from "vue";

    let layoutHeight = ref(); //全局包围部分
    let layoutRef = ref(); //全局包围部分
    let serchRef = ref(); //搜索部分
    let tableHeight = ref(); //表格部分

    const props = defineProps(['pageHeight']);
    let pageHeight = props.pageHeight ? props.pageHeight : 50;

    onMounted(() => {
        layoutHeight.value = layoutRef.value.offsetHeight - serchRef.value.offsetHeight;
        tableHeight.value = layoutHeight.value - 50
        //动态计算内容的高度
        window.addEventListener("resize", () => {
            layoutHeight.value = layoutRef.value.offsetHeight - serchRef.value.offsetHeight;
            tableHeight.value = layoutHeight.value - 50
        })

    })

</script>